<!-- 这个组件是将主题按方块来显示的，方块中显示缩略图 -->
<script setup lang="ts">
import type {TabsPaneContext} from 'element-plus'
import {Server} from '@/stores/ajax'
import {GetUserState} from '@/stores/userState';

import {nextTick, onActivated, watch, ref} from 'vue'
import {ServerUtils} from '@/serverUtils';
import {lowerPostImage, timeFormat} from '@/utils';
let posts = ref<any>()
type PostCallback = (page: number, posts_per_page: number) => Promise<any>
const props = defineProps({
    postCallback: Function
})

const postCallback: PostCallback = props.postCallback as any
let posts_per_page = 10

let loadfail = ref(false)
let currentPage = 1
let loading = false
const handleCurrentChange = async (val: number) => {
    await postCallback(val, posts_per_page).then(ps => {
        console.log(ps)
        if (ps?.list.length) {
            for (let post of ps.list) {
                // lowerPostImage(post)
            }
        }
        posts.value = ps
    })
}
const refresh = async () => {
    await handleCurrentChange(1)
}
refresh()
defineExpose({refresh, currentPage, posts})
</script>

<template>
    <div v-if='$DEV' class="dev-tag">postList3</div>
    <div v-if='posts?.list'>
        <div class="work-list fhs">
            <div class="item hp" v-for='item of posts.list'>
                <div
                    @click='$router.push({path: `/event/e1work/${item.topic.id}`})'>
                    <div class="pic"
                        v-if='item.topic && item.topic.thumbnail'
                        :style='`background-image: url("${Server.fileBaseURL + item.topic.thumbnail}");`'>
                    </div>
                    <div class="below-pic fvs">
                        <div class="work-title"
                            style="flex-grow: 1;">
                            {{ item.topic.name}}
                        </div>
                        <div class="baseline fhs">

                            <div style='flex-grow: 1;' class="fhs">
                                <el-avatar :size="23" style='margin-right: 4px;'
                                    :src="Server.fileBaseURL + item.user.avatar" />
                                <div class="author-name"> 
                                    {{ item.user.user_name}}
                                </div>
                            </div>
                            <div class="fhs">
                                <img src="icon-like.png" style='margin-right: 4px;'
                                    @click="ServerUtils.star(item)"
                                    class="icon-like hp">
                                <div class="vote-num">
                                    {{ item.vote_count ||
                                            ''
                                    }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="fh">
            <el-pagination
                v-model:current-page="currentPage"
                :page-size="10" :hide-on-single-page='false'
                layout="total, prev, pager, next ,jumper"
                :total="posts.total"
                @current-change="handleCurrentChange"
                style="width: 600px;" class="fh pager" />
        </div>
    </div>
</template>

<style scoped lang="scss">
.work-list {
    gap: 10px;
    flex-wrap: wrap;

    .item {
        box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 30%) inset, 0 0.5em 1em rgb(0 0 0 / 2%);
        background-color: white;
        border-radius: 8px;
        overflow: hidden;
        flex-basis: calc((100% - 30px)/4);
        height: 320px;

        .pic {

            background-image: url("event-pic1.png");
            padding-bottom: 75%;
            background-position: 50%;
            background-size: cover;
            background-repeat: no-repeat;

        }

        .below-pic {
            margin: 1px 20px 0;
            height: 104px;
        }

        .work-title {
            font-size: 24px;
            color: #333;
            padding-bottom: 10px;

        }

        .icon-like {
            width: 20px;
            height: 20px;
            filter: opacity(0.4);
            margin-right: 2px;
        }

        .baseline {
            color: #333;
        }
    }
       .item:hover {
            box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 30%) inset, 0 0.5em 1em rgb(0 0 0 / 8%);
            transform: translateY(-1px);
            transition: all 0.3s ease;

        }
}
</style>
<style lang='scss'>
.pager {
    margin-top: 40px;

    .btn-prev,
    .btn-next,
    li {
        background-color: #fff0 !important;
    }
}
</style>

